<template>
  <div>
    <header>
      <section>
        <label for="title">ToDowxy</label>
        <input
          type="text"
          v-model="title"
          @keyup.enter="addTodo"
          placeholder="添加ToDo"
        />
      </section>
    </header>
    <section>
      <h2 class="titleName">
        正在进行
        <span>{{ todoLen }}</span>
      </h2>
      <ol class="demo-box">
        <!-- <div v-for="data in todoList"> -->
        <!-- {{ data.title }} -->
        <li
          v-for="(item, index) in todoList"
          :key="index"
          v-if="item.completed == 0"
        >
          <!-- {{ item }} -->
          <p>
            <input
              type="text"
              v-model="item.title"
              @keyup.enter="updata(item)"
            />
          </p>
          <input type="checkbox" @change="changeTodo(item.id, 1, index)" />
          <a @click="deleteTodo(index, 0)"><i class="el-icon-delete"></i></a>
        </li>
        <!-- </div> -->
      </ol>
      <h2 class="titleName">
        已经完成
        <span>{{ comTodo }}</span>
      </h2>
      <ul>
        <li
          v-for="(item, index) in todoList"
          :key="index"
          v-if="item.completed == 1"
        >
          <input
            type="checkbox"
            @change="changeTodo(item.id, 0, index)"
            checked="checked"
          />
          <p>{{ item.title }}</p>
          <a @click="deleteComTodo(index, 1)"><i class="el-icon-delete"></i></a>
        </li>
      </ul>
    </section>
    <footer>
      <h2><a @click="clearData()" class="delall">清除所有</a></h2>

      Copyright ©赣ICP备2021009247号 todolist.cn
    </footer>
  </div>
</template>

<script>
// import * as Utils from "@/utils/utils";
import axios from "axios";

export default {
  name: "Todolist",
  data() {
    return {
      title: "",
      todoList: [],
      todoLen: 0,
      comTodo: 0,
    };
  },
  beforeMount() {
    this.getAllitems();
  },
  methods: {
    // initTodo() {
    //   var todoArr = Utils.getItem("todoList");
    //   if (todoArr) {
    //     for (let i = 0, len = todoArr.length; i < len; i++) {
    //       if (todoArr[i].completed === 0) {
    //         this.todoLen++;
    //       }
    //     }
    //     this.todoList = todoArr;
    //   }
    // },
    async getAllitems() {
      const data = await axios.get("http://moonrise.work:3000/api/getallitems");
      if (data) {
        for (let i = 0, len = data.data.length; i < len; i++) {
          if (data.data[i].completed == 0) {
            this.todoLen++;
          } else {
            this.comTodo++;
          }
        }
        this.todoList = data.data;
      }
      // this.todoList = data.data;
      console.log(data.data);
    },
    updata(item) {
      // let titleItem = this.titleData;
      // this.titleData.push(titleItem);
      // console.log(this.titleData);
      axios.post("http://moonrise.work:3000/api/updataitem", item);
      this.$message("更新成功！！！");

      // console.log(item);
      // axios.post("")
    },
    addTodo() {
      if (this.title) {
        const getId = () => {
          var rnd = "";
          for (var i = 0; i < 6; i++) rnd += Math.floor(Math.random() * 10);
          return rnd;
        };
        let todoObj = {
          id: getId(),
          title: this.title,
          completed: 0,
        };
        console.log(todoObj);
        this.todoList.push(todoObj);
        this.todoLen++;
        this.title = "";
        axios.post("http://moonrise.work:3000/api/saveitem", { todoObj });
      } else {
        this.$message.error("请输入内容！！！");
        return;
      }
    },
    deleteTodo(index, completed) {
      if (completed == 0) {
        this.todoLen--;
      } else {
        this.comTodo--;
      }
      var id = this.todoList[index].id;
      axios.post("http://moonrise.work:3000/api/delitem", { id });
      this.$message.warning("删除成功！！！");
      this.todoList.splice(index, 1);
      // console.log(index);
      // Utils.setItem("todoList", this.todoList);
    },
    deleteComTodo(index, completed) {
      if (completed == 1) {
        this.comTodo--;
      }
      var id = this.todoList[index].id;
      axios.post("http://moonrise.work:3000/api/delitem", { id });
      this.$message.warning("删除成功！！！");
      this.todoList.splice(index, 1);
      // console.log(index);
      // Utils.setItem("todoList", this.todoList);
    },
    changeTodo(id, completed, index) {
      if (completed) {
        this.todoLen--;
        this.comTodo++;
        this.todoList[index].completed = 1;
        // Utils.setItem("todoList", this.todoList);
      } else {
        this.todoLen++;
        this.comTodo--;
        this.todoList[index].completed = 0;
        // Utils.setItem("todoList", this.todoList);
      }
      axios.post("http://moonrise.work:3000/api/changeitem", {
        id,
        completed,
      });
    },
    clearData() {
      axios.post("http://moonrise.work:3000/api/cleardata");
      this.todoList = [];
      this.todoLen = 0;
      this.comTodo = 0;
    },
  },
  mounted() {
    // this.initTodo();
    // console.log(this.todoList);
    // this.getAllTodoItems();
  },
};
</script>

<style scoped>
</style>
